<template>
    <div ref="chartContainer" class="chart"></div>
  </template>
  
  <script setup>
  import { ref, onMounted, onUnmounted } from 'vue';
  import * as echarts from 'echarts';
  
  // 定义 ref 变量保存图表容器和实例
  const chartContainer = ref(null);
  let chartInstance = null;
  
  // 示例数据
  const studentScore = 620;  // 学生的总分
  const scoreCategories = [
    { name: '重本线', min: 650 },
    { name: '一本线', min: 600 },
    { name: '本科线', min: 550 },
    { name: '大专线', min: 450 },
    { name: '补录线', min: 300 }
  ];
  
  // 计算饼图数据
  const pieData = scoreCategories.map(category => ({
    value: studentScore >= category.min ? studentScore : 0,
    name: category.name
  }));
  
  // 如果学生总分低于补录线
  if (studentScore < scoreCategories[scoreCategories.length - 1].min) {
    pieData.push({ value: studentScore, name: '未达线' });
  }
  
  // ECharts 配置项
  const option = {
    title: {
      text: '学生成绩分布',
      subtext: '总分与各分数线对比',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '分数分布',
        type: 'pie',
        radius: '50%',
        data: pieData,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  
  onMounted(() => {
    // 初始化 ECharts 实例
    if (chartContainer.value) {
      chartInstance = echarts.init(chartContainer.value);
      chartInstance.setOption(option);
    }
  });
  
  onUnmounted(() => {
    // 销毁 ECharts 实例
    if (chartInstance) {
      chartInstance.dispose();
    }
  });
  </script>
  
  <style scoped>
  .chart {
    width: 100%;
    height: 300px;
  }
  </style>
  